<template>
    <div class="plugin-data-box" v-loading="loading">
        <div class="input-box" style="position: relative">
            <el-button type="success" class="btn" @click="showModal" style="position: absolute; right: 10px">新增</el-button>
            <div class="user-search">
                <span class="input-title">关键词</span>
                <el-input
                    placeholder="外挂名称/外挂包名/签名"
                    clearable
                    @keyup.enter.native="getList(1)"
                    style="width:300px;"
                    v-model.trim="keyword">
                </el-input>
            </div>
            <el-button type="primary" class="btn" @click="getList(1)">查询</el-button>

            <div class="input-in" style="margin-left: 10px">
                <span style="margin-right: 10px; font-size: 14px; font-weight: 500;">状态</span>
                <el-select @change="statusChange" style="width:150px;" v-model="statusChangeVal">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="停用" :value="0"></el-option>
                    <el-option label="启用" :value="1"></el-option>
                </el-select>
            </div>
        </div>
        <div class="table-box">
            <el-table
                :data="list"
                border
                @sort-change="sortChange"
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="userId"
                    label="类型">
                    <template slot-scope="scope">
                        <span>{{typeVal[scope.row.type] || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.name || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="包名"
                    width="200"
                    >
                    <template slot-scope="scope">
                        <span>{{scope.row.packageName || '-'}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    label="签名"
                    width="160"
                    >
                    <template slot-scope="scope">
                        <span>{{scope.row.appSign || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态"
                    width="160"
                    >
                    <template slot-scope="scope">
                        <span>{{statusVal[scope.row.status] || '-'}}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    width="200"
                    prop="createTime"
                    label="添加日期">
                    <template slot-scope="scope">
                        <div>{{scope.row.createTime | timeInit}}</div>
                    </template>
                </el-table-column>
                
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <p class="table-btn" @click="showModal(scope.row)">编辑</p>
                        <p class="table-btn" :style="{ 'color': '#67C23A' }" @click="updateList(scope.row)"> {{ scope.row.status ? '停用' : '启用'}}</p>
                        <p class="table-btn" style="color: red" @click="delList(scope.row)">删除</p>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogTitle"
            width="500px"
            class="editor-dialog"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :visible.sync="showDialog">
            <div class="dialog-body">
              <div class="dialog-list">
                <span>类型：</span>
                <div>
                  <el-select @change="typeChange" style="width:150px;" v-model="typeChangeVal">
                      <el-option label="虚拟机" :value="1"></el-option>
                      <el-option label="工具" :value="2"></el-option>
                      <el-option label="王者荣耀" :value="3"></el-option>
                      <el-option label="和平精英" :value="4"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="dialog-list">
                <span>名称：</span>
                <div>
                  <el-input
                    placeholder=""
                    clearable
                    @keyup.enter.native="getList(1)"
                    style="width:300px;"
                    v-model.trim="pluginName">
                  </el-input>
                </div>
              </div>
              <div class="dialog-list">
                <span>包名：</span>
                <div>
                  <el-input
                    placeholder=""
                    clearable
                    @keyup.enter.native="getList(1)"
                    style="width:300px;"
                    v-model.trim="pluginPackage">
                  </el-input>
                </div>
              </div>
              <div class="dialog-list">
                <span>签名：</span>
                <div>
                  <el-input
                    placeholder=""
                    clearable
                    @keyup.enter.native="getList(1)"
                    style="width:300px;"
                    v-model.trim="pluginSignName">
                  </el-input>
                </div>
              </div>
            </div>
            <span slot="footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="addEditList">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { formatDate, conversion } from '@/utils/utils'
export default {
    data () {
        return {
            loading: false,
            list: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            keyword: '',
            statusChangeVal: '',
            typeChangeVal: '',
            dialogTitle: '新增',
            pluginName: '',
            pluginPackage: '',
            pluginSignName: '',
            showDialog: false,
            editId: null,
            statusVal: {
                0: '停用',
                1: '启用',
            },
            typeVal: {
                1: '虚拟机',
                2: '工具',
                3: '王者荣耀',
                4: '和平精英',
            }
        }
    },
    created () {
        this.keyword = this.$route.query.keyword || ''
        this.getList(1)
    },

    methods: {
        async updateList (item) {
            let res = await this.$http.get('/trade/gamePlugConfUpdate', {
                params: {
                    id: item.id,
                    status: item.status ? 0 : 1,
                }
            })
            if (res.code === '0') {
                this.getList(1)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },
        async delList (item) {
            let res = await this.$http.get('/trade/gamePlugConfDelete', {
                params: {
                    id: item.id
                }
            })
            if (res.code === '0') {
                this.getList(1)
                this.$message({
                    type: 'success',
                    message: '删除成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },
        showModal (item) {
          this.showDialog = true
          this.dialogTitle = '新增'
          this.pluginName = ''
          this.pluginSignName = ''
          this.pluginPackage = ''
          this.typeChange = ''
          this.editId = null
          if (item && item.id) {
            this.editId = item.id
            this.dialogTitle = '编辑'
            this.pluginName = item.name
            this.pluginSignName = item.appSign
            this.pluginPackage = item.packageName
            this.typeChangeVal = item.type
          }
        },
        // 编辑或者新增外挂记录
        async addEditList() {
          this.showDialog = false
          let params = {
              appSign: this.pluginSignName,
              name: this.pluginName,
              packageName: this.pluginPackage,
              status: this.statusChangeVal,
              type: this.typeChangeVal,
          }
          let url = `/trade/gamePlugConfAdd`
          if (this.editId) {
              url = '/trade/gamePlugConfUpdate'
              params.id = this.editId
          }
          let res = await this.$http.get(url, {
                params
            })
            this.$message({
                type: 'success',
                message: this.editId ? '编辑成功' : '添加成功'
            })
            if (res.code === '0') {
                this.getList(1)
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },
        typeChange(val) {
          this.typeChangeVal = val
        },
        statusChange(val) {
            this.statusChangeVal = val
            this.getList(1)
        },
        async getList (num, flag) {
            if (this.loading) return
            this.loading = true
            this.pageNum = num

            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                status: this.statusChangeVal,
            }

            if (this.keyword) {
                params.keyWord = this.keyword
            }
            let res = await this.$http.get('/trade/selectGamePlugConf', {
                params
            })
            if (res.code === '0') {
                this.list = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },

        pageChange (val) {
            this.getList(val)
        },

        // 后端排序
        sortChange ({ column, prop, order }) {
            this.sort = order || ''
            // 如果没有 sort prop 置为空
            if (!this.sort) {
                this.type = null
            } else {
                if (this.sort === 'ascending') {
                    this.sort = 'asc'
                } else {
                    this.sort = 'desc'
                }
                this.type = prop
            }
            this.getList(1)
        },

        // 查看用户详情
        goUserDetail (id) {
            const { href } = this.$router.resolve({
                path: `/dataReport/userInfo`,
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },

        // 数字转换
        conversion (val) {
            return conversion(val)
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '-'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .dialog-body {
      .dialog-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        span {
          margin-right: 10px;
        }
      }  
    }
    .plugin-data-box {
        
        .input-wrap {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-top: 30px;
            margin-bottom: 20px;
            .input-in {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
        .input-title {
            margin-right: 10px;
        }
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 40px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .user-search {
                position: relative;
                .user-card {
                    position: absolute;
                    bottom: -60px;
                    left: 40px;
                    display: inline-block;
                    border-radius: 4px;
                    border: solid 1px #00ba45;
                    background-color: #eefff4;
                    font-size: 12px;
                    font-weight: 500;
                    color: #999eae;
                    margin: 18px 0 20px 30px;
                    padding: 5px 29px;
                    &:before {
                        content: '';
                        position: absolute;
                        top: -7px;
                        left: 35px;
                        width: 0;
                        height: 0;
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                        border-bottom: 7px solid #00ba45;
                    }
                    &:after {
                        content: '';
                        position: absolute;
                        top: -5px;
                        left: 35px;
                        width: 0;
                        height: 0;
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                        border-bottom: 7px solid #eefff4;
                    }
                }
            }
            
            .btn {
                margin-left: 10px;
            }
        }
        .table-box {
            margin: 20px 0;
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
